﻿<script src="https://unpkg.com/@@element-plus/icons-vue@2.0.0/dist/index.iife.js"></script>
<div id="app" class="common-layout">
    <el-container>
        <el-container>
            <el-aside :width="isCollapse ? '64px' : '240px'">

                <el-menu default-active="1"
                         class="el-menu-vertical-demo"
                         :collapse="isCollapse"
                         :collapse-transition="false"
                         unique-opened
                >
                    <div class="toggle-button" v-on:click="gb()">福泰仓储</div>
                    <!-- 动态渲染一级菜单：有子列表则为sub-menu，无子列表则为menu-item -->
                    <template v-for="item in list" :key="item.jurID">
                        <!-- 1. 有子列表的一级菜单：作为子菜单容器 -->
                        <el-sub-menu
                            :index="'level1-' + item.jurID"
                            v-if="item.list && item.list.length > 0"
                        >
                            <template #title>
                                <el-icon :size="20">
                                    <component :is="item.icon"></component>
                                </el-icon>
                                <span style="margin-left: 8px;">{{ item.jurName }}</span>
                            </template>

                            <!-- 二级菜单（原有逻辑保持不变） -->
                            <template v-for="item1 in item.list" :key="item1.jurID">
                                <!-- 有三级菜单 -->
                                <el-sub-menu
                                    :index="'level2-' + item1.jurID"
                                    v-if="item1.list && item1.list.length > 0"
                                >
                                    <template #title>
                                        <el-icon :size="18">
                                            <component :is="item1.icon"></component>
                                        </el-icon>
                                        <span style="margin-left: 8px;">{{ item1.jurName }}</span>
                                    </template>

                                    <!-- 三级菜单：功能项 -->
                                    <el-menu-item
                                        :index="'level3-' + item2.jurID"
                                        v-for="item2 in item1.list"
                                        :key="item2.jurID"
                                        v-on:click="spath(item2.jurAddress)"
                                    >
                                        <el-icon :size="16">
                                            <component :is="item2.icon"></component>
                                        </el-icon>
                                        <span style="margin-left: 8px;">{{ item2.jurName }}</span>
                                    </el-menu-item>
                                </el-sub-menu>

                                <!-- 无三级菜单的二级菜单：直接作为功能项 -->
                                <el-menu-item
                                    :index="'level2-' + item1.jurID"
                                    v-else
                                    v-on:click="spath(item1.jurAddress)"
                                >
                                    <el-icon :size="18">
                                        <component :is="item1.icon"></component>
                                    </el-icon>
                                    <span>{{ item1.jurName }}</span>
                                </el-menu-item>
                            </template>
                        </el-sub-menu>

                        <!-- 2. 无子列表的一级菜单：直接作为功能项 -->
                        <el-menu-item
                            :index="'level1-' + item.jurID"
                            v-else
                            v-on:click="spath(item.jurAddress)"
                        >
                            <el-icon :size="18">
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{ item.jurName }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-aside>
            <el-main>
                <div class="headPage">
                    <div class="headP">
                        <el-dropdown style="margin-right:100px">
                            <el-button v-on:click="backPage()" type="success">回到首页</el-button>
                        </el-dropdown>
                        <el-avatar :size="40" :src="circleUrl"></el-avatar>&nbsp;&nbsp;&nbsp;
                        <span class="userName">欢迎您,{{ currentUserName }}</span>
                    </div>
                </div>
                <div class="iframe-container">
                    <iframe :src="mainUrl" class="main-iframe" frameborder="0"></iframe>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>

<script>
    // 等待页面资源加载完成
    window.onload = function() {
        // 从 CDN 暴露的全局对象中获取所有图标
        const icons = window.ElementPlusIconsVue;

        // 创建 Vue 实例
        const { createApp, reactive, toRefs, ref } = Vue;
        const app = createApp({
            setup() {
                // 你的原有逻辑（保持不变）
                const mainUrl = ref('/Home/Index');
                const storedValue = sessionStorage.getItem('YH');
                const userName = ref('');
                const rolesName = ref('');
                const uid = ref(0);
                const isCollapse = ref(false);
                const list = ref([]);
                const apath = ref("");

                const getCurrentUserName = () => {
                    const userStr = sessionStorage.getItem('YH');
                    if (!userStr) {
                        ElMessage.warning('未检测到登录状态，请重新登录');
                        return '';
                    }
                    try {
                        const userObj = JSON.parse(userStr);
                        const userName = userObj?.trueName?.toString() || '';
                        if (!userName) ElMessage.warning('用户信息不完整');
                        return userName;
                    } catch (error) {
                        console.error('解析用户信息失败：', error);
                        ElMessage.error('用户信息异常');
                        return '';
                    }
                };

                const currentUserName = ref(getCurrentUserName());
                const state = reactive({
                    circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                });
                const backPage = () => { mainUrl.value = "/Home/Index"; };
                const { circleUrl } = toRefs(state);

                if (storedValue) {
                    const user = JSON.parse(storedValue);
                    userName.value = user.trueName;
                    rolesName.value = user.rolesName;
                    uid.value = user.id;
                }

                const handleLogout = () => {
                    sessionStorage.clear();
                    window.location.href = "/Login/Index";
                };

                function fill() {
                    axios.get("/CreateMenu/CreateMenu", {
                        params: { uid: uid.value }
                    }).then((res) => {
                        list.value = res.data.map(item => {
                            // 一级菜单处理
                            if (item.jurName === "编号规则") {
                                item.icon = "Menu"; // 强制指定为基础Menu图标
                                console.log("编号规则已强制设置为Menu图标");
                            }
                            // 二级菜单处理
                            if (item.list && item.list.length > 0) {
                                item.list = item.list.map(subItem => {
                                    if (subItem.jurName === "编号规则") {
                                        subItem.icon = "Menu";
                                    }
                                    // 三级菜单处理
                                    if (subItem.list && subItem.list.length > 0) {
                                        subItem.list = subItem.list.map(thirdItem => {
                                            if (thirdItem.jurName === "编号规则") {
                                                thirdItem.icon = "Menu";
                                            }
                                            return thirdItem;
                                        });
                                    }
                                    return subItem;
                                });
                            }
                            return item;
                        });
                    }).catch((err) => {
                        console.info("错误信息为:" + err);
                    });
                }
                fill();

                function gb() { isCollapse.value = !isCollapse.value; }
                function spath(s) { mainUrl.value = s; }

                return {
                    userName, mainUrl, handleLogout, rolesName, uid,
                    fill, gb, isCollapse, list, spath, apath,
                    circleUrl, currentUserName, backPage
                };
            }
        });

        // 关键：注册所有图标组件（让 <component :is="item.Icon"> 能识别）
        for (const [iconName, iconComponent] of Object.entries(icons)) {
            app.component(iconName, iconComponent);
        }

        // 注册 Element Plus
        app.use(ElementPlus);
        // 挂载到 #app
        app.mount('#app');
    };
</script>

<style>
    /* 样式部分保持不变 */
    * {
        box-sizing: border-box;
        margin: 0;
    }

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-weight:bolder;
    }

    .common-layout {
        width: 100vw;
        height: 100vh;
        margin: 0;
    }

    .el-container {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100vw !important;
        height: 100vh !important;
    }

    .el-header {
        background: rgb(69, 185, 132);
        padding: 0;
        height: 80px;
        width: 100vw;
        margin: 0;
    }

    .container {
        margin: 0;
        padding: 0;
        width: 100vw !important;
        height: 100vh !important;
    }

    .pb-3 {
        padding: 0;
        height: 100vh;
    }

    h1 {
        color: white;
        text-align: center;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
        margin: 0;
        line-height: 50px;
    }

    .header-welcome {
        text-align: right;
    }

        .header-welcome span {
            margin-right: 20px;
        }

    .flex-container {
        display: flex-direction;
        gap: 10px;
    }

    .menu-icon {
        height: 20px;
    }

    .el-collapse {
        width: 80vw;
    }

    iframe {
        width: 100%;
        height: 100%;
        background-color: #eee;
    }

    .flex-container .el-collapse {
        width: 220px;
    }

    .el-menu {
        height: 100%;
    }

    .el-aside {
        background-color: rgb(247, 242, 242);
        color: #333;
        text-align: center;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .el-main {
        background-color: white;
        color: #333;
        text-align: center;
        padding: 0 !important;
        height: calc(100vh) !important;
        display: flex;
        flex-direction: column;
    }

    .aside-header {
        position: fixed;
        top: 0;
        left: 0;
        padding: 0;
        background: rgb(69, 185, 132);
        z-index: 10;
    }

    .el-menu {
        height: 100%;
        background: transparent !important; /* 让侧边栏渐变穿透 */
    }

    /* 侧边栏渐变主体 */
    .el-aside {
        background: linear-gradient(180deg, #4FCEC4 -40%, #fff 100%) !important;
        color: #333;
        text-align: center;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .el-menu-item:hover,
    .el-sub-menu__title:hover {
        background: linear-gradient(90deg, #5FE0D6, #4FC8BD) !important;
        color: #fff !important;
    }


    .el-container {
        margin-bottom: 40px;
        height: 450px;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .el-col {
        border-radius: 4px;
    }

    .toggle-button {
        background: linear-gradient(90deg, #4FCEC4, #3FB3A8);
        font-size: 24px;
        text-align: center;
        color: #fff;
        line-height: 80px;
        letter-spacing: 0.2em;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .headPage {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .headP {
        height: 50px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: right;
    }

    .tagP {
        height: 50px;
        background-color: #ddd;
    }

    .el-main {
        overflow-y: auto;
    }

    .userName {
        margin-right: 100px;
    }

    .iframe-container {
        flex: 1;
        overflow: hidden;
    }

    .main-iframe {
        width: 100%;
        height: 100%;
        border: none;
        background-color: #eee;
    }
</style>